<template>
  <div class="filter">
    <el-form ref="form" :model="formDate" label-width="80px">
      <el-row>
        <el-col :span="6">
          <el-form-item label="学科">
            <el-select v-model="formDate.subjectID" placeholder="请选择" @change="subjectChange($event)">
              <el-option v-for="item in subjectsSL" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="二级目录">
            <el-select v-model="formDate.catalogID" placeholder="请选择">
              <el-option v-for="item in directorysSL" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="标签">
            <el-select v-model="formDate.tags" placeholder="请选择">
              <el-option v-for="item in tagsSL" :key="item.value" :label="item.label" :value="item.label" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="关键字">
            <el-input v-model="formDate.keyword" placeholder="根据题干搜索" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="试题类型">
            <el-select v-model="formDate.questionType" placeholder="请选择">
              <el-option v-for="item in questionType" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="难度">
            <el-select v-model="formDate.difficulty" placeholder="请选择">
              <el-option v-for="item in difficulty" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="方向">
            <el-select v-model="formDate.direction" placeholder="请选择">
              <el-option v-for="item in direction" :key="item" :label="item" :value="item" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="录入人">
            <el-select v-model="formDate.creatorID" placeholder="请选择" style="width:100%;">
              <el-option v-for="item in usersSL" :key="item.id" :label="item.username" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="题目备注">
            <el-input v-model="formDate.remarks" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="企业简称">
            <el-input v-model="formDate.shortName" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="城市">
            <el-select v-model="formDate.provinces" style="width:46%;" @change="provincesChange($event)">
              <el-option v-for="item in provinces" :key="item" :label="item" :value="item" />
            </el-select>
            <el-select v-model="formDate.city" style="width:46%;margin-left:5px;">
              <el-option v-for="item in provincesCitys" :key="item" :label="item" :value="item" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-button style="float: right;" type="primary" @click="handleSeach">搜索</el-button>
          <el-button style="float: right;margin-right:10px;" @click="handleClear">清除</el-button>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { simple as simpleUsers } from '@/api/base/users'
import { simple as directorysSimple } from '@/api/hmmm/directorys'
import { simple as subjectsSimple } from '@/api/hmmm/subjects/'
import { simple as tagsSimple } from '@/api/hmmm/tags'
import { provinces, citys } from '@/api/hmmm/citys'
import { difficulty, direction, questionType } from '@/api/hmmm/constants'
export default {
  name: 'QuestionsChoiceFrom',
  data () {
    return {
      // 录入人列表
      usersSL: [],
      // 标签列表
      tagsSL: [],
      // 二级目录列表
      directorysSL: [],
      // 学科列表
      subjectsSL: [],
      // 所有省份
      provinces: [],
      // 当前省份对应城市
      provincesCitys: [],
      // 获取难度
      difficulty: {},
      // 方向
      direction: [],
      // 试题类型
      questionType: [],
      formDate: {
        tags: null,  // 标签
        creatorID: null, // 录入人
        catalogID: null, // 二级目录
        subjectID: null, // 学科
        provinces: null, // 企业所在地省份
        city: null, // 企业所在城市
        difficulty: null, // 难度
        direction: null, // 方向
        questionType: null, // 试题类型
        remarks: null, // 题目备注
        shortName: null, // 企业简称
        keyword: null, // 关键字
      },
    }
  },
  watch: {
    formDate: {
      deep: true,
      handler (val) {
        console.log(val);
      }
    }
  },
  created () {
    // 获取学科简单列表
    this.subjectsSimpleList()
    // 获取所有省份列表
    const provincesVal = provinces()
    this.provinces = provincesVal
    // 获取难度列表
    const difficultyVal = difficulty
    this.difficulty = difficultyVal
    // 获取方向数据列表
    this.direction = direction
    // 试题类型列表
    this.questionType = questionType
  },
  methods: {
    // 搜索
    handleSeach () {
      this.$emit('Seach', this.formDate)
    },
    // 获取学科列表&录入人列表
    async subjectsSimpleList () {
      // promise 请求数据并行写法
      const ret1 = await subjectsSimple()
      const ret2 = await simpleUsers()
      await Promise.all([ret1, ret2])
      this.subjectsSL = ret1.data
      this.usersSL = ret2.data
    },
    // ==============================   学科关联事件
    // 获取二级目录列表数据&标签列表数据
    async subjectChange (e) {
      const ret1 = await directorysSimple(e)
      const ret2 = await tagsSimple(e)
      await Promise.all([ret1, ret2])
      this.directorysSL = ret1.data
      this.tagsSL = ret2.data
      // 切换学科置空关联目录和标签
      this.formDate.catalogID = ''
      this.formDate.tags = ''
    },
    // 获取当前选择省份下级市
    provincesChange (e) {
      this.provincesCitys = citys(e)
      this.formDate.city = ''
    },
    // 清除筛选项
    handleClear () {
      this.formDate = this.$options.data().formDate
    }
  }
}
</script>

<style>
</style>
